<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.fl{
				float: left;
			}
			.fr{
				float: right;
			}
			.clearfix{
				clear: both;
				display: table;
				content: "";
			}
			.box{
				width: 100%;
				height: 1000px;
			}
			.box .bg{
				z-index: 1;
				width: 100%;
			}
			.box #login{
				position: absolute;
				right: 140px;
				top: 20px;
		    }
		    .box #mask{
		    	width: 100%;
		    	z-index:2 ;
		    	transition: all 1.5s;
		    	background-size: cover;
		    }
			.box .confirm{
				display: none;
				z-index: 3;
				position: absolute;
				top: -1000px;
				width:356px;
				height: 420px;
				border: 1px solid #CCCCCC;
				background-color: white;
				transition: all 1s;
			}
			.box .confirm .close{
				width: 356px;
				height: 40px;
				margin-top: -10px;
				transition: all 1s;
			}
			.box .confirm .close span{
				font-size: 40px;
				margin-left: 330px;
				color: #CCCCCC;
				cursor: pointer;
			}
			.box .confirm .log{
				margin-left: 30px;
				height: 40px;
				margin-top: 10px;
			}
			.box .confirm .log span{
				line-height: 40px;
				margin-left: 15px;
			}
			.box .confirm .erweima{
				width: 148px;
				margin: 20px auto;
			}
			.box .confirm .erweima img{
				width: 138px;
				height: 138px;
				border: 1px solid #CCCCCC;
				padding: 5px;
			}
			.box .confirm p{
				text-align: center;
			}
			.box .confirm p a{
				color: deepskyblue;
				text-decoration: none;
			}
			.box .confirm .title{
				text-align: center;
				margin-top: 20px;
			}
			.box .confirm .btn{
				margin-top: 40px;
			}
			.box .confirm .btn .yes{
				margin-left: 60px;
			}
			.box .confirm .btn .no{
				margin-left: 160px;
			}
			#login{
				background-color: #00BFFF;
				border: none;
				width: 40px;
				height:20px ;
				color: white;
				font-size: 12px;
				cursor: pointer;
			}
			#confirmbtn1{
				background-color: #00BFFF;
				border: none;
				width: 40px;
				height:20px ;
				color: white;
				font-size: 12px;
				cursor: pointer;
			}
			#confirmbtn2{
				background-color: #00BFFF;
				border: none;
				width: 40px;
				height:20px ;
				color: white;
				font-size: 12px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="mask"></div>
		<div class="box">
			<input type="button" value="登录" id="login" />
			<div class="confirm" id="myconfirm">
				<div class="close">
					<span id="close">×</span>
				</div>
				<div class="log clearfix">
					<img src="img/loginlogo.png" class="fl"/>
					<span class="fl">扫码登录</span>
				</div>
				<div class="erweima">
					<img src="img/erweima.png" />
				</div>
				<p>
					<span>请使用</span>
					<a href="#">手机百度APP</a>
					<span>扫码登录</span>
				</p>
				<div class="title">
					<img src="img/title.png" />
				</div>
				<div class="btn">
					<input type="button" value="确定" class="yes" id="confirmbtn1"/>
					<input type="button" value="取消" class="no" id="confirmbtn2"/>
				</div>
			</div>
			<img src="img/bg.png" class="bg" />
		</div>
		<script>
			var w = document.body.scrollWidth;
			var h = document.body.scrollHeight;
			var login = document.getElementById("login");
			var myconfirm = document.getElementById("myconfirm");
			var close = document.getElementById("close");
			var confirmbtn1 = document.getElementById("confirmbtn1");
			
			var mask = document.getElementById("mask");
			mask.style.width = w+"px";
			mask.style.height = h + "px";
			mask.style.position = "absolute";
			mask.style.left = "0px";
			mask.style.top = "0px";
			mask.style.background = "rgba(0,0,0,.5)";
			mask.style.display = "none";
			
			login.onclick = loginclick;
			function loginclick(){
				myconfirm.style.display = "block";
				mask.style.display = "block";
                var ww=document.documentElement.clientWidth || document.body.clientWidth;
                var hh=document.documentElement.clientHeight || document.body.clientHeight;
				
				var confirmw = myconfirm.clientWidth;
				var confirmh = myconfirm.clientHeight;
				
				myconfirm.style.left = ww/2 - confirmw/2 + "px";
				myconfirm.style.top = hh/2 - confirmh/2 + "px";
				
				myconfirm.style.opacity = 1;
			};
			
			confirmbtn1.onclick = function(){
				alert("恭喜您！登录成功");
				myconfirm.style.display = "none";
				mask.style.display = "none";
			}
			
			close.onclick = confirmbtn2.onclick = function(){
				myconfirm.style.opacity = 0;
				myconfirm.style.top = "-1000px";
//				myconfirm.style.display = "none";
				mask.style.display = "none";
				setTimeout(function(){
					myconfirm.style.display = "none";
				},600);
			};
			
			window.onresize = function(){
				loginclick();
			};
		</script>
	</body>
</html>
